/* 整合理念: 坚决不能造成更多的心智负担
 flex:
    h: 水平方向(horizontal)
    v: 垂直方向(vertical)
    L: left
    R: right
    U: up
    D: down
    C: center
		S: 两端
*/
.yd-flex {
	display: flex;
}
.yd-flex-wrap {
	display: flex;
	flex-wrap: wrap;
}
/* 水平 */
.yd-flex-hC {
  display: flex;
	justify-content: center;
}
.yd-flex-hR {
  display: flex;
	justify-content: flex-end;
}
.yd-flex-hS {
  display: flex;
	justify-content: space-between;
}
/* 垂直 */
.yd-flex-v {
  display: flex;
	flex-direction: column;
}
.yd-flex-vC {
  display: flex;
	flex-direction: column;
	justify-content: center;
}
.yd-flex-vD {
  display: flex;
	flex-direction: column;
	justify-content: flex-end;
}
.yd-flex-vS {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
/* 子项 */
.yd-flex-1 {flex: 1;overflow: hidden} /*不会造成其他元素的挤压*/
.yd-flex-2 {flex: 2;}
.yd-flex-3 {flex: 3;}
.yd-flex-4 {flex: 4;}
.yd-flex-5 {flex: 5;}
/*水平: 垂直方向*/
.yd-flex-h-hL-vC { /*水平排列;水平左靠齐;垂直居中*/
	display: flex;
	align-items: center;
}
.yd-flex-h-hL-vD { /*水平排列;水平左靠齐;垂直底下*/
	display: flex;
	align-items: flex-end;
}
.yd-flex-h-hC-vC { /*水平排列;水平居中;垂直居中*/
	display: flex;
	justify-content: center;
	align-items: center;
}
.yd-flex-h-hC-vD { /*水平排列;水平居中;垂直向下*/
	display: flex;
	justify-content: center;
	align-items: flex-end;
}
.yd-flex-h-hR-vC { /*水平排列;水平右靠齐;垂直居中*/
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
.yd-flex-h-hS-vC{ /*水平排列;两边对齐;垂直居中*/
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.yd-flex-h-hS-vD{ /*水平排列;两边对齐;垂直底下*/
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}
/*垂直: 水平方向*/
.yd-flex-v-hR-vU{ /*垂直排列;水平右靠齐;垂直向上*/
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}
.yd-flex-v-hR-vC{ /*垂直排列;水平右靠齐;垂直居中*/
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
}
.yd-flex-v-hC-vC{ /*垂直排列;水平居中;垂直居中*/
	display: flex;
  flex-direction: column;
	justify-content: center;
	align-items: center;
}
.yd-flex-v-hC-vU { /*垂直排列;水平居中;垂直向上*/
	display: flex;
	flex-direction: column;
	align-items: center;
}